<template>
  <div style="height:100%">
    <wxc-tab-bar
      ref="wxc-tab-bar"
      :tab-titles="tabTitles"
      :tab-styles="tabStyles"
      title-type="icon"
      :tab-page-height="tabPageHeight"
      :need-slider="needSlider"
      @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
      <div class="item-container" :style="contentStyle">
        <project></project>
      </div>
      <div class="item-container" :style="contentStyle">
        <new></new>
      </div>
      <div class="item-container" :style="contentStyle">
        <address></address>
      </div>
    </wxc-tab-bar>
    <wxc-popup
      class="popup"
      popup-color="#fff"
      :show="isBottomShow"
      @wxcPopupOverlayClicked="popupOverlayBottomClick"
      pos="bottom"
      height="200">
      <div class="demo-content">
        <wxc-cell class="popupBtn" title="技术服务" @click="toServe">
          <wxc-icon slot="label" name="warning"></wxc-icon>
        </wxc-cell>
        <wxc-cell class="popupBtn" title="退出" @click="logout">
          <wxc-icon slot="label" name="wrong"></wxc-icon>
        </wxc-cell>
      </div>
    </wxc-popup>
  </div>
</template>
<style>
  .item-container {
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%!important;
  }
  .tab-container{
    width:100%;
    height:100%;
  }
  .popup .wxc-popup{
    justify-content:center;
  }
  .popup .cell-content{
    text-align:center;
    font-size:1.2em;
  }
  .popup .popupBtn{
  
  }
</style>
<script>
  import { WxcTabBar, Utils, WxcPopup, WxcCell, WxcIcon } from 'weex-ui'
  import Config from './config/config'
  import Project from './project/index.vue'
  import Address from './address/index.vue'
  import New from './new/index.vue'
  export default {
    components: { WxcTabBar, 'address': Address, 'new': New, 'project': Project, WxcPopup, WxcCell, WxcIcon },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabPageHeight: Utils.env.getPageHeight(),
      isBottomShow: false,
      needSlider: false,
    }),
    created () {
      const tabPageHeight = Utils.env.getPageHeight();
      const { tabStyles } = this;
      this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
      this.$store.subscribe((action, state) => {
        this.$set(this.$data, 'isBottomShow', state.menuShow)
      })
    },
    mounted () {
      const self = this;
      this.$nextTick(() => {
        console.log(self.$store.state.justIndex)
        self.$refs['wxc-tab-bar'].setPage(self.$store.state.justIndex);
//        self.wxcTabBarCurrentTabSelected({page:self.$store.state.justIndex})
      })
    },
    methods: {
      wxcTabBarCurrentTabSelected (e) {
        const index = e.page;
        var title = '';
        switch (index) {
          case 0: title = '项目';break;
          case 1: title = '动态';break;
          case 2: title = '通讯录';break;
        }
        this.$store.dispatch('TITLE_CHANGE', {title, index})
      },
      popupOverlayBottomClick () {
        this.$store.dispatch('CALL_MENU');
      },
      logout () {
        this.$store.dispatch('CALL_MENU');
        this.$router.push('/logout')
      },
      toServe () {
        this.$store.dispatch('CALL_MENU');
        this.$router.push('/serve')
      }
    }
  }
</script>